<template>
    <!-- 首页导航 -->
    <div class="header-menu-container full-screen-container">
        <div class="main-container flex-between menu-wrap">
            <ul class="menu-list flex-start">
                <li class="menu-item"
                    v-for="menuItem in navList"
                    :key="menuItem.id"
                    :class="[{'active': activeId && activeId === menuItem.id }, 'pointer']"
                    @click="changeMenu(menuItem, index)">
                    <span :title="menuItem?.title" >{{menuItem?.title}}</span>
                    <!-- 五个以内导航 -->
                    <ul
                        class="submenu-list pop-menu-list"
                        v-if="menuItem?.sub_navs?.length">
                        <li
                            class="pop-menu-item"
                            v-for="subItem in menuItem.sub_navs"
                            :key="subItem.id"
                            @click="changeMenu(subItem)">
                           {{subItem.title}}
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- 更多导航 -->
            <div class="option-wrap flex-center pointer" v-if="moreNavList.length">
                <img class="option-icon" src="~@/assets/img/gateway/menu-stow@2x.png" alt="">
                <div class="more-menu-list">
                    <div
                        v-for="(item, index) in moreNavList"
                        :key="index"
                        :class="{ 'mar-l40': index > 0 }">
                        <div
                            class="pop-menu-header"
                            :class="[{'pointer': !item.sub_navs || item.sub_navs.length === 0 }]"
                            @click="changeMenu(item)">
                            {{item.title}}
                        </div>
                        <ul v-if="item.sub_navs">
                            <li
                                class="more-menu-item pointer"
                                v-for="(subItem, index) in item.sub_navs"
                                :key="index"
                                @click="changeMenu(subItem)">
                                {{subItem.title}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const emit = defineEmits(['change-menu'])

const props = defineProps({
    menuList: { // 菜单
        type: Array,
        default: () => {
            return [];
        }
    },
    activeRoute: {
        type: Object,
        default: () => {
            return {};
        }
    }
})

// 当前选中的导航
const activeId = computed(() => {
    return props.activeRoute && props.activeRoute.id || '';
})


// 前五个导航
const navList = computed(() => {
    return props.menuList.length && props.menuList.slice(0, 6) || [];
})

// 更多导航
const moreNavList = computed(() => {
    if(props.menuList.length > 6) {
        return props.menuList.slice(6);
    }
    return [];
})


// 跳转路由
function changeMenu (menuItem) {
    emit('change-menu', menuItem);
}


</script>

<style lang="scss" scoped>

// 渐变色头部颜色
$nav-top-bg-color: var(--nav-top-bg-color);
// 渐变色底部颜色
$nav-bottom-bg-color: var(--nav-bottom-bg-color);

$nav-bg-active-color: var(--nav-bg-active-color);

$nav-sub-bg-active-color: var(--nav-sub-bg-active-color);
$nav-sub-bg-more-color: var(--nav-sub-bg-more-color);


.header-menu-container {
    height: 70px;
    background: linear-gradient(360deg, $nav-top-bg-color 0%, $nav-bottom-bg-color 100%);
    .menu-wrap {
        position: relative;
    }
    .menu-list {
        .menu-item {
            position: relative;
            height: 70px;
            color: var(--color-white);
            font-size: 20px;
            max-width: 110px;
            display: flex;
            align-items: center;
            text-align: center;
            overflow: visible;
            margin-right: 80px;
            span {
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /* 这里是超出几行省略 */
                overflow: hidden;
            }
            
            &:hover {
                font-weight: bold;
            }

            &.active {
                color: var(--color-white);
                padding: 0px 35px;
                background-color: $nav-bg-active-color;
                font-weight: bold;
                margin-right: 45px;
                font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            }

            &:hover {
                .pop-menu-list {
                    display: block;
                }
            }
        }
    }
    .submenu-list {
        padding: 20px;
    }
    .option-wrap {
        width: 70px;
        height: 70px;
        position: relative;
        background: rgba(0, 0, 0, 0.1);
        .option-icon {
            width: 36px;
            height: 36px;
        }
        &:hover {
            .other-menu-list {
                display: flex;
            }
            .more-menu-list {
                 display: flex;
                 white-space: nowrap;
            }
        }
    }

    .more-menu-list, .pop-menu-list {
        position: absolute;
        background: $nav-sub-bg-more-color;
        border-radius: 4px;
        backdrop-filter: blur(6px);
        z-index: 3;
        display: none;
        transition: display 0.2s;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: -2px;
            width: 100%;
            height: 2px;
            background: transparent;
            display: block;
        }
    }
    .more-menu-list {
        min-width: 152px;
        right: 0px;
        padding: 30px;
        top: 72px;
        max-width: 1200px;
    }
    .pop-menu-list {
        width: 168px;
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
    }
    .pop-menu-item,
    .more-menu-item {
        color: var(--color-white);
        cursor: pointer;
        &:hover {
            color: $nav-sub-bg-active-color;
        }
    }
    .pop-menu-item {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        &:nth-child(n+2) {
            margin: 15px 0 0;
        }
    }
    .more-menu-item {
        color: var(--color-white);
        line-height: 22px;
        text-align: left;
        margin: 12px 0 0;
    }
    .pop-menu-header {
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 28px;
        cursor: default;
    }
    .mar-l40 {
        padding-left: 40px;
    }
}
.pointer {
    cursor: pointer !important;
}
</style>